@charset "utf-8";

body,
html {
    margin: 0 auto;
    min-width: 300px;
    max-width: 1000px;
    height: 100%;

    background-color: #e8e8e8;
}

section {
    margin-bottom: 20px;
    padding: 20px;

    background-color: #fff;
}

main {
    overflow-y: scroll;

    flex: 1;

    // 跳转指示图标
    .icon-mine-detail {
        float: right;

        font: bold 22px/1em "微软雅黑";

        color: #8a8a8a;
    }

    // 用户信息
    .user-info {
        .user-pic {
            position: relative;

            margin-top: 15px;

            align-items: center;

            // 头像
            .user-head {
                overflow: hidden;

                border: 3px solid #4294ff;
                border-radius: 50%;
                width: 120px;
                height: 120px;

                background-color: #e8e8e8;

                img {
                    border-radius: 50%;
                    width: 100%;
                    height: 100%;
                }
            }

            // vip
            .icon-mine-vip {
                position: absolute;
                bottom: 0;
                left: 90px;

                font-size: 22px;

                color: #ff7100;
                background-color: #fff;
            }

            .link-detail {
                flex: 1;
                justify-content: space-between;
            }

            // 用户名
            .user-name {
                margin-left: 20px;
                height: 30px;

                font-size: 22px;
                text-align: left;

                color: #101010;
            }
        }

        // 上传头像
        input {
            display: none;
        }

        // 个性签名
        .signature {
            overflow: hidden;

            margin-top: 20px;
            height: 25px;

            font-size: 18px;
            white-space: nowrap;
            text-overflow: ellipsis;

            color: #8a8a8a;
        }
    }

    h3 {
        height: 24px;

        .mine-label {
            font: normal 18px/24px "微软雅黑";
            text-align: left;

            color: #101010;
        }

        .icon-mine-label {
            font-size: 22px;

            color: #4294ff;
        }
    }

    // 运动数据
    .data {
        .data-datas {
            margin-top: 15px;

            justify-content: space-around;

            h4 {
                height: 22px;

                font: normal 16px/16px "微软雅黑";
                text-align: left;

                color: #8a8a8a;
            }

            p {
                margin-top: 15px;

                span {
                    font: normal 36px/40px "微软雅黑";
                    text-align: left;

                    color: #4294ff;
                }
            }

            .divid-line {
                border: 1px dashed #8a8a8a;
            }
        }
    }

    // 运动徽章
    .badge {
        .badge-medals {
            margin-top: 15px;

            justify-content: space-around;

            .badge-medal {
                overflow: hidden;

                border: 1px solid #4294ff;
                border-radius: 50%;
                width: 100px;
                height: 100px;

                line-height: 20px;
                text-align: center;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    // 退出登录
    .logout {
        text-align: center;

        .logout-btn {
            height: 18px;

            font-size: 18px;

            color: #4294ff;
            background-color: transparent;
        }
    }
}
